<template>
  <div class="priceSetting">

    <div class="ele-title-1">
      <h4>价格设置</h4>
    </div>
    <div class="ele-store">
      <span class="ele-span-title">城市：</span>

      <div class="card-list">
        <el-card @click.native="addRelation">
          <div slot="header" class="ele-card-header" />
          <div class="ele-content">
            <div class="left"><el-image :src="require('@/assets/images/city.png')" alt="" /></div>
            <div class="right">
              <p>{{ city }}</p>
            </div>
            <div>
              <el-image :src="require('@/assets/images/xiala.png')" alt="" style="width: 40px;height: 40px" />
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <div class="ele-store">
      <span class="ele-span-title">服务：</span>
      <div class="card-list">
        <el-card>
          <div class="ele-div--1">
            <div class="left"><TableColumnGoodsImage :src="serviceImg" :img-size="'100px'" /></div>
            <div class="right">
              <p>{{ serviceName }}</p>
            </div>
          </div>
        </el-card>
      </div>
    </div>
    <!--    <div class="el-button-1">
      <div class="el-city ele-store">
        <el-col :span="2">
          <h6>城市</h6>
        </el-col>
        <el-col :span="4">
          <el-button type="infor" class="" @click="addRelation">
            <el-col :span="6">
              <img src="../../../../../public/city.png" alt="">
            </el-col>
            <el-col :span="6" class="el-col-offset-3">
              <span><b>{{ city }}</b></span>
            </el-col>
            <el-col :span="3" class="el-col-offset-5">
              <img src="../../../../../public/xiala.png">
            </el-col>
          </el-button>
        </el-col>
      </div>
      <div class="el-service ele-store">
        <el-col :span="2">
          <h6>服务</h6>
        </el-col>
        <el-col :span="4">
          <el-card>
            <el-col :span="8">
              <TableColumnGoodsImage :src="serviceImg" :img-size="'70px'" />
            </el-col>
            <el-col :span="6" class="el-col-offset-1">
              <span>{{ serviceName }}</span>
            </el-col>
          </el-card>
        </el-col>
      </div>
    </div>-->
    <div class="ele-title-2">
      <h5>服务价格设置</h5>
    </div>
    <div class="ele-content">
      <el-form :model="form" :rules="rules" label-width="120px" label-position="left">
        <el-form-item label="服务科室:" prop="department">
          <el-col :span="6">
            <el-cascader
              v-model="form.department"
              :disabled="true"
              placeholder="服务科室"
              class="ele-cascader"
              :options="departmentOptions"
              collapse-tags
              :props="{ multiple: true, checkStrictly: true }"
              clearable
            />
          </el-col>
        </el-form-item>
        <el-form-item label="销售价格:" prop="salePrice">
          <el-col :span="4">
            <el-input-number
              v-model="form.salePrice"
              placeholder="输入销售价格"
              :controls="false"
              :precision="2"
              :min="0"
              :max="1000000"
              suffix-icon="iconfont icon-settingyuan"
            />
            <p class="title-txt">实际销售价格</p>
          </el-col>
        </el-form-item>
        <el-form-item label="医生派单机制" prop="doctorTakeOrderType">
          <el-col :span="10">
            <el-radio v-model="form.doctorTakeOrderType" label="0">按顺序抢单</el-radio>
            <p class="title-txt">按照医生顺序派单，发送给一个医生后10分钟内接单，自动发送给下一个医生</p>
            <el-radio v-model="form.doctorTakeOrderType" label="1">全部一起抢单</el-radio>
            <p class="title-txt">一次发送给符合条件的全部医生进行抢单</p>
          </el-col>
        </el-form-item>
        <el-form-item label="服务规格:">
          <el-col :span="20">
            <div class="Specifications">
              <div class="cations-tag">
                <el-row v-for="(item, index) in list" :key="index">
                  <SpecItem ref="SpecItem" :index="index" :table-head="item" :type="3" @createTable="createTable" />
                </el-row>
              </div>
            </div>
            <table v-if="list && list.length > 0" class="ele-table">
              <thead>
                <tr v-if="theadList&&theadList.length>0">
                  <td v-for="(item,index) in theadList" :key="index">{{ item }}</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item,k) in tbodyList" :key="k">
                  <td v-for="(i,index) in item" v-show="i.val!==''" :key="index" :rowspan="i.rowspan">
                    <span v-if="i.val!=='salePrice'&&i.val!=='salePrice'&&i.val!=='img'">{{ i.val }}</span>
                    <div v-if="i.val==='img' && imgList.length > 0">
                      <div v-for="(m,n) in imgList" :key="n">
                        <TableImg v-if="n===k" ref="TableImg" :index="index" :url="m" />
                      </div>
                    </div>
                    <div v-if="i.val==='img' && imgList.length == 0">
                      <span>图片未上传</span>
                    </div>
                    <div v-if="i.val==='salePrice'&&serviceSpecPriceList&&serviceSpecPriceList.length>0">
                      <ServiceCostValue ref="ServiceCostValue" :index="index" :table-price="serviceSpecPriceList[k]" :commodity-id="regularProductId[k]" />
                    </div>
                    <div v-if="i.val==='salePrice'&&serviceSpecPriceList.length===0">
                      <ServiceCostValue ref="ServiceCostValue" :index="index" :commodity-id="regularProductId[k]" />
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </el-col>
        </el-form-item>
      </el-form>
      <el-footer>
        <div style="margin: 0 auto;display: flex;justify-content: center">
          <el-button type="primary" size="medium" @click="submitOnlineServiceCity">提交</el-button>
          <el-button type="primary" @click="returnPage">返回上一页</el-button>
        </div>
      </el-footer>
    </div>
    <!-- 选择城市 -->
    <el-dialog :visible.sync="dialogVisible" width="80%">
      <div slot="title" class="ele-dialog-title">选择城市</div>
      <el-form ref="formData" :model="formData">
        <div class="ele-div-keysearch">
          <div class="search-left">
            <el-button type="primary" plain @click="resetForm">全部</el-button>
            <city-select ref="citySelect" v-model="formData.address" :is-hide="false" @change="changedAddress" />
          </div>
          <div class="search-right search-flex">
            <div class="ele-input">
              <el-input v-model="formData.cityKeyWords" suffix-icon="el-icon-search" placeholder="输入名称搜索" />
            </div>
            <el-button type="primary" @click="search">确定</el-button>
          </div>
        </div>
      </el-form>

      <div class="ele-table">
        <el-table
          ref="elTable"
          v-loading="listLoading"
          :data="cityList1"
          height="400"
          :fit="true"
          element-loading-text="正在查询中。。。"
        >
          <el-table-column type="selection" fixed="left" width="50" />
          <el-table-column label="省份" prop="provinceName" />
          <el-table-column label="城市" prop="cityName" />
          <el-table-column label="操作" fixed="right" width="300">
            <template slot-scope="scope">
              <span>
                <el-button
                  type="text"
                  @click="selectOrder(scope.row)"
                >选择</el-button>&nbsp;
              </span>
            </template>
          </el-table-column>
        </el-table>
        <div class="ele-div-footer">
          <div class="footer-left" />
          <el-pagination
            background
            :page-sizes="[10, 20, 30, 50, 100]"
            :page-size="limit"
            :pager-count="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="pageSizeChange"
            @current-change="currentPageChange"
          />
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import SpecItem from '@/components/SpecItem'
import ServiceCostValue from '@/components/ServiceCostValue'
import TableImg from '@/components/TableImg'
import {
  addOnlineServiceCity,
  departmentList,
  loadOnlineServiceCity,
  unlinkCityList
} from '@/api/service'
import CitySelect from '@/components/CitySelect'
import TableColumnGoodsImage from '@/components/TableColumnGoodsImage' // Secondary package based on el-pagination

export default {
  name: 'PriceSetting',
  components: { SpecItem, ServiceCostValue, TableImg, CitySelect, TableColumnGoodsImage },
  data() {
    return {
      form: {
        department: null,
        salePrice: null,
        doctorTakeOrderType: null
      },

      id: null,
      isEdit: false,
      imgList: [],
      tableList: [],
      theadList: [],
      tbodyList: [],
      list: [],
      servicePic: {
        name: '图片',
        values: [{ val: 'img' }]
      },
      serviceSale: {
        name: '销售价格',
        values: [
          {
            val: 'salePrice'
          }
        ]
      },
      serviceSpecPriceList: [],

      formData: {
        allCity: true,
        address: {
          province: null,
          city: null,
          village: null
        },
        cityKeyWords: null
      },
      page: 1,
      limit: 10,
      total: 0,
      listLoading: true,
      cityList1: [],
      serviceSpecList: [],
      regularProductId: [],
      serviceid: null,
      serviceName: '',
      serviceImg: '',
      provinceid: null,
      province: '',
      cityid: null,
      city: '',
      dialogVisible: false,
      departmentOptions: [],
      rules: {
        department: [{ required: true, message: '服务科室不能为空', trigger: ['blur', 'change'] }],
        salePrice: [{ required: true, message: '销售价格不能为空', trigger: 'blur' }],
        doctorTakeOrderType: [{ required: true, message: '请选择医生派单机制', trigger: ['blur', 'change'] }]
      }
    }
  },
  watch: {
    editorData(newValue, oldValue) {
      console.log(newValue)
    }
  },
  /* data() {
    dialogVisible: false
  }, */
  created() {
    this.init()
  },

  methods: {
    init() {
      const departmentData = {
        shopId: localStorage.getItem('shopId'),
        page: 1,
        limit: 0
      }
      departmentList(departmentData).then(response => {
        console.log(response.data.data)
        const departmentList = response.data.data.data
        departmentList.forEach(item => {
          const label = {
            value: item.id,
            label: item.name
          }
          this.departmentOptions.push(label)
        })
      })
      const params = this.$dd(this.$route.query.p)
      this.serviceid = params.serviceid
      this.serviceImg = params.serviceImage
      this.serviceName = params.serviceName

      if (params && params.id) {
        this.id = params.id
        loadOnlineServiceCity(1, params.id).then(response => {
          console.log(response.data.data)

          this.form.department = response.data.data.departmentId
          this.form.salePrice = response.data.data.onlineServerPrice
          this.cityid = response.data.data.cityId
          this.city = response.data.data.cityName
          this.provinceid = response.data.data.provinceId
          this.province = response.data.data.provinceName
          this.form.doctorTakeOrderType = response.data.data.doctorTakeOrderType.toString()
          this.loadServiceSpec(response.data.data.regualrList)
          response.data.data.regualrCombo.forEach((item, index) => {
            if (item.picture) {
              this.imgList.push(item.picture)
            }

            this.regularProductId.push(item.productId)
            response.data.data.productDetail.forEach((info, i) => {
              if (item.productId === info.onlineServerProductId) {
                this.serviceSpecPriceList.push(info.onlineServerProductPrice)
              }
            })
          })
        })
      } else {
        loadOnlineServiceCity(0, this.serviceid).then(response => {
          console.log(response.data.data)
          this.form.department = response.data.data.departmentId
          this.loadServiceSpec(response.data.data.regualrList)
          response.data.data.regualrCombo.forEach((item, index) => {
            if (item.picture) {
              this.imgList.push(item.picture)
            }
            this.regularProductId.push(item.productId)
          })
        })
      }
    },

    /** 增加选择城市 */
    addRelation() {
      this.dialogVisible = true
      this.loadTableData()
    },
    loadServiceSpec(a) {
      a.forEach(item => {
        this.list.push(item)
      })
      this.$nextTick(() => {
        for (let i = 0; i < this.list.length; i++) {
          this.$refs.SpecItem[i].$data.tableHead.name = this.list[i].name
          this.$refs.SpecItem[i].$data.tableHead.values = this.list[i].valueList
          for (let j = 0; j < this.list[i].valueList.length; j++) {
            this.$refs.SpecItem[i].$data.tableHead.values[j].val = this.list[i].valueList[j].value
          }
        }
        console.log(this.$refs.SpecItem)
        this.createTable()
      })
    },
    /* loadServiceSpec(a) {
      const allList = []
      a.forEach(item => {
        const serviceSpec = {
          serviceSpecId: item.id,
          salePrice: ''
        }
        this.serviceSpecList.push(serviceSpec)
        if (item.onlineServerProductPrice) {
          this.serviceSpecPriceList.push(item.onlineServerProductPrice)
        }
        const tableLine = []
        console.log(JSON.parse(item.specifications))
        JSON.parse(item.specifications).forEach(i => {
          if (i.name !== '成本价' && i.name !== '原本价格') {
            tableLine.push(i)
          }
        })
        allList.push(tableLine)
      })
      console.log(allList)
      const specItemList = []
      for (let j = 0; j < b.length; j++) { // 列号
        const specItem = {
          name: '',
          values: []
        }
        const values = []
        for (let k = 0; k < allList.length; k++) { // 行号
          for (let m = k + 1; m < allList.length; m++) {
            if (allList[k][j].val === allList[m][j].val && values.indexOf(allList[k][j].val) === -1) {
              values.push(allList[k][j].val)
            } else if (allList[k][j].val !== allList[m][j].val && values.indexOf(allList[k][j].val) !== -1 && values.indexOf(allList[m][j].val) === -1) {
              values.push(allList[m][j].val)
            }
          }
        }
        specItem.name = allList[0][j].name
        specItem.values = values
        specItemList.push(specItem)
        console.log(specItemList)
      }
      for (let m = 0; m < allList.length; m++) {
        for (let n = 0; n < allList[m].length; n++) {
          if (allList[m][n].name === '图片') {
            console.log(allList[m][n])
            this.imgList.push(allList[m][n].val)
          }
        }
      }
      this.list = specItemList
      this.$nextTick(() => {
        for (let i = 0; i < specItemList.length; i++) {
          this.$refs.SpecItem[i].$data.tableHead.name = specItemList[i].name
          this.$refs.SpecItem[i].$data.tableHead.values = specItemList[i].values
          for (let j = 0; j < specItemList[i].values.length; j++) {
            this.$refs.SpecItem[i].$data.tableHead.values[j].val = specItemList[i].values[j]
          }
        }
        console.log(this.$refs.SpecItem)
        this.createTable()
        console.log(this.imgList)
      })
    },*/
    // 创建表格
    createTable() {
      this.tableList = []
      if (this.list && this.list.length !== 0) {
        this.$refs.SpecItem.forEach(item => {
          this.tableList.push(item.getData())
          console.log(item)
        })
      }
      console.log(this.tableList)
      const arrList = []
      const headList = []

      this.tableList.push(this.servicePic, this.serviceSale)
      this.tableList.forEach(item => {
        if (item.name) {
          headList.push(item.name)
          if (item.values && item.values.length !== 0) {
            arrList.push(item.values)
          }
        }
      })
      this.theadList = headList

      const modelList = this.cartesianProductOf(...arrList)
      const list = []
      const count = 1

      for (let i = 0; i < modelList.length; i++) {
        const modelArrList = []
        for (let k = 0; k < modelList[i].length; k++) {
          modelArrList.push({
            val: modelList[i][k].val,
            index: k,
            rowspan: count
          })
        }
        list.push(modelArrList)
      }
      console.log(list)
      this.tableRowspan(list, modelList)

      this.tbodyList = list
    },
    // table合并行方法 a为table数组 b为对比数组
    tableRowspan(a, b) {
      for (let i = 0; i < a.length - 1; i++) {
        for (let k = 0; k < a[i].length; k++) {
          for (let j = i + 1; j < b.length; j++) {
            if (k === 0) {
              if (a[i][k].val === b[j][k].val) {
                a[i][k].rowspan++
                a[j][k].val = ''
              } else {
                console.log({ i, j, k })
                break
              }
            } else {
              if (a[i][k].val === b[j][k].val && a[j][k - 1].val === '') {
                a[i][k].rowspan++
                a[j][k].val = ''
              } else {
                console.log({ i, j, k })
                break
              }
            }
          }
        }
      }
    },
    // 笛卡尔积
    cartesianProductOf() {
      return Array.prototype.reduce.call(arguments, function(a, b) {
        const ret = []
        a.forEach(function(a) {
          b.forEach(function(b) {
            ret.push(a.concat([b]))
          })
        })
        return ret
      }, [[]])
    },
    /** 城市选择弹出框加载*/
    resetForm() {
      const vm = this
      vm.$refs.formData.resetFields()
      vm.$refs.citySelect.resetFields()
      vm.reloadTableData()
    },
    search() {
      const vm = this
      vm.reloadTableData()
    },
    pageSizeChange(pageSize) {
      const vm = this

      vm.limit = pageSize

      vm.$refs.formData.validate((valid) => {
        if (valid) {
          vm.reloadTableData()
        }
      })
    },
    currentPageChange(page) {
      const vm = this

      vm.page = page

      vm.$refs.formData.validate((valid) => {
        if (valid) {
          vm.loadTableData()
        }
      })
    },
    reloadTableData() {
      const vm = this

      vm.page = 1
      vm.total = 0
      vm.cityList1 = []
      vm.loadTableData()
    },
    /* changedAllCity() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.$refs.citySelect.resetFields()
      }
    },*/
    changedAddress() {
      const vm = this
      if (vm.formData.address.province || vm.formData.address.city || vm.formData.address.village) {
        vm.formData.allCity = false
      } else {
        vm.formData.allCity = true
      }
    },
    loadTableData() {
      /* const data = {
        serviceId: this.serviceid,
        serviceCityAddress: {
          shengId: this.address.shengId,
          sheng: this.address.sheng,
          shiId: this.address.shiId,
          shi: this.address.shi
        },
        cityKeyWords: this.cityKeyWords,
        page: 1,
        limit: this.limit
      }*/
      const data = {
        serviceId: this.serviceid,
        page: this.page,
        limit: this.limit,
        serviceCityAddress: {
          shengId: null,
          sheng: null,
          shiId: null,
          shi: null
        }
      }
      if (this.formData.address.province) {
        data.serviceCityAddress.shengId = this.formData.address.province.code
        data.serviceCityAddress.sheng = this.formData.address.province.name
      }
      if (this.formData.address.city) {
        data.serviceCityAddress.shiId = this.formData.address.city.code
        data.serviceCityAddress.shi = this.formData.address.city.name
      }
      if (this.formData.cityKeyWords) {
        data['cityKeyWords'] = this.formData.cityKeyWords
      }
      this.listLoading = true
      unlinkCityList(data).then(response => {
        this.cityList1 = response.data.data.data
        this.total = response.data.data.total
        this.listLoading = false
      })
    },
    selectOrder(row) {
      this.cityid = row.cityId
      this.city = row.cityName
      this.province = row.provinceName
      this.provinceid = row.provinceId
      console.log(this.cityid)
      console.log(this.city)
      console.log(this.provinceid)
      console.log(this.province)
      this.dialogVisible = false
    },
    returnPage() {
      this.$store.dispatch('tagsView/delView', this.$route)
      this.$router.go(-1)
    },
    submitOnlineServiceCity() {
      this.$nextTick(() => {
        this.$refs.ServiceCostValue.forEach((item, index) => {
          if (!item.getData() || item.getData() == 0) {
            const count = index + 1
            return this.$message.error('第' + count + '行的销售价格不能为0')
          } else {
            this.serviceSpecList.push({ serviceSpecId: item.commodityId, salePrice: item.getData() })
          }
        })
        if (this.$refs.ServiceCostValue.length == this.serviceSpecList.length) {
          const data = {
            servicecityId: this.id,
            serviceId: this.serviceid,
            serviceCity: {
              shengId: this.provinceid,
              sheng: this.province,
              shiId: this.cityid,
              shi: this.city
            },
            allPrice: this.form.salePrice,
            doctorTakeOrderType: parseInt(this.form.doctorTakeOrderType),
            serviceSpec: this.serviceSpecList
          }
          if (!this.provinceid) {
            return this.$message({ type: 'error', message: '请选择服务城市' })
          }
          if (!this.form.salePrice && this.serviceSpecList.length == 0) {
            return this.$message({ type: 'error', message: '销售价格不能为空' })
          }
          if (!this.form.doctorTakeOrderType) {
            return this.$message.error('请选择医生派单机制')
          }
          console.log(this.cityList1)
          console.log(this.serviceSpecPriceList)
          console.log(data)
          addOnlineServiceCity(data).then(response => {
            console.log(response.data)
            this.$store.dispatch('tagsView/delView', this.$route)
            this.$router.go(-1)
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.priceSetting {
  padding: 0px 100px;
  min-width: 1700px;
  .ele-store {
    display: flex;
    .ele-span-title {
      font-weight: bold;
      font-size: 18px;
      width: 60px;
    }
    .card-list {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      ::v-deep.el-card {
        margin-right: 20px;
        margin-bottom: 20px;
        width: auto !important;
        .el-card__header {
          border: none;
          padding: 0;
        }
        .ele-card-header {
          float: right;
        }
        .ele-content {
          display: flex;
          align-items: center;
          .left {
            width: 60px;
            height: 60px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            width: 100px;
            margin-left: 10px;
            p:first-child {
              font-weight: bold;
              font-size: 20px;
              margin: 0;
            }
            p:last-child {
              color: gray;
              margin: 10px 0px 0px 0px;
            }
          }
        }
        .ele-div--1 {
          display: flex;
          align-items: center;
          .left {
            width: 100px;
            height: 100px;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .right {
            margin-left: 10px;
            p {
              font-size: 20px;
            }
            p:first-child {
              font-weight: bold;
              margin: 0;
              margin-bottom: 25px;
            }
            p:last-child {
              color: gray;
              margin: 10px 0px 0px 0px;
            }
          }
        }
      }
    }
  }
  .ele-title-1 {
    margin-top: 40px;
    /* padding-left: 20px; */
  }
  .el-button-1 .el-city,.el-service{
    height: 90px;
  }
  .el-button-1 span{
    line-height: 50px;
    text-align: center;
  }
  .el-button img{
    width: 100%;
  }
  .el-button-1 .el-col-offset-5{
    display: flex;
    align-items: center;
    height: 50px;
    image{
      align-items: center;
    }
  }
  .ele-title-2 {
    background: #f3f3f3;
    height: 50px;
    border-radius: 5px;
    line-height: 50px;
    margin-top: 40px;
    padding-left: 10px;
  }
  .ele-content {
    padding: 0px 25px;
    ::v-deep.el-form-item--medium {
      margin-top: 20px;
    }
    ::v-deep.el-form-item__label {
      width: 100px;
      text-align: start;
    }
    .ele-proportion,
    .ele-pre {
      margin-left: 100px;
    }
    .ele-pre {
      line-height: 30px;
      font-size: 14px;
      color: gray;
      width: 520px;
    }
    .title-txt {
      font-size: 14px;
      color: gray;
      white-space: nowrap;
      margin: 0;
      padding: 0;
    }
    .ele-cascader {
      width: 100%;
    }
    .ele-proportion {
      ::v-deep.el-input {
        width: 150px;
      }
    }
    .Specifications {
      padding: 40px 20px;
      width: 100%;
      border: 1px solid #e6e6e6;
      .cations-tag {
        ::v-deep.el-row {
          margin-top: 15px;
        }
        .ele-col-item {
          width: 60px;
        }
      }
      ::v-deep.el-button {
        width: 150px;
      }
    }
    .ele-table {
      min-width: 100%;
      border-collapse: collapse;
      margin-top: 30px;
      tr td {
        width: 80px;
        border: 1px solid #e6e6e6;
        box-sizing: border-box;
        text-align: center;
      }
      thead {
        font-weight: bold;
        tr td {
          height: 60px;
        }
      }
      tbody {
        tr {
          td {
            ::v-deep.el-image {
              width: 50px;
              height: 50px;
              object-fit: cover;
              border: 1px solid #e6e6e6;
              overflow: unset;
              margin: 10px 0px;
            }
            ::v-deep.el-input {
              width: 120px;
            }
            .custom {
              display: flex;
              align-items: center;
              justify-content: center;
              span {
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
    .ele-commdity-detail {
      ::v-deep.el-form-item__label {
        width: 100% !important;
        background: #f3f3f3;
        height: 50px;
        line-height: 50px !important;
      }
    }
    .a-details-right {
      width: 100%;
      display: flex;
      justify-content: center;
      img {
        display: inline-block;
        width: 200px;
        height: 200px;
      }
    }
  }
  .ele-div-keysearch {
    display: flex;
    justify-content: space-between;
    .search-left {
      display: flex;
      ::v-deep.el-select,
      .ele-input,
      .el-button {
        margin-left: 15px;
      }
      ::v-deep.el-select {
        width: 100px;
      }
    }
    .search-flex {
      display: flex;
      ::v-deep.el-button {
        margin-left: 15px;
      }
    }
  }
  .ele-table {
    width: 100%;
    margin-top: 40px;
    .ele-div-footer {
      display: flex;
      justify-content: space-between;
      margin: 50px 0px 100px 0px;
      .footer-left {
        ::v-deep.el-button {
          width: 100px;
          margin: 0px;
        }
      }
    }
  }
}
</style>
